<template>
  <div>
    <v-card
      class="mx-auto pa-12 pb-8"
      elevation="8"
      max-width="1500"
      rounded="lg"
    >
      <v-row>
        <!--左边-->
        <v-col>
          <v-img
            class="mx-auto my-6"
            max-width="228"
            src="@/assets/placeholder.jpg"
          ></v-img>
        </v-col>
        <!--右边-->
        <v-col>
          <v-card-title>用户注册</v-card-title>
          <div class="text-subtitle-1 text-medium-emphasis">账号</div>

          <v-text-field
            v-model="name"
            :rules="[rules.required,rules.nameCounter]"
            density="compact"
            placeholder="请输入用户名"
            prepend-inner-icon="mdi-account-outline"
            variant="outlined"
          ></v-text-field>

          <div class="text-subtitle-1 text-medium-emphasis">邮箱</div>

          <v-text-field
            v-model="email"
            :rules="[rules.required, rules.email]"
            density="compact"
            placeholder="请输入邮箱"
            prepend-inner-icon="mdi-email-outline"
            variant="outlined"
          ></v-text-field>

          <div class="text-subtitle-1 text-medium-emphasis d-flex align-center justify-space-between">
            密码
          </div>

          <v-text-field
            v-model="password"
            :append-inner-icon="visible ? 'mdi-eye-off' : 'mdi-eye'"
            :rules="[rules.required, rules.pwdCounter]"
            :type="visible ? 'text' : 'password'"
            density="compact"
            placeholder="请输入密码"
            prepend-inner-icon="mdi-lock-outline"
            variant="outlined"
            @click:append-inner="visible = !visible"
          ></v-text-field>

          <div class="text-subtitle-1 text-medium-emphasis d-flex align-center justify-space-between">
            请确认密码
          </div>

          <!--确认密码-->
          <v-text-field
            v-model="passwordConfirm"
            :append-inner-icon="visible ? 'mdi-eye-off' : 'mdi-eye'"
            :rules="[rules.required, rules.pwdCounter]"
            :type="visible ? 'text' : 'password'"
            density="compact"
            placeholder="请再次输入密码"
            prepend-inner-icon="mdi-lock-outline"
            variant="outlined"
            @click:append-inner="visible = !visible"
          ></v-text-field>

          <v-card
            class="mb-12"
            color="surface-variant"
            variant="tonal"
          >
          </v-card>

          <v-btn
            block
            class="mb-8"
            color="blue"
            size="large"
            variant="tonal"
            @click="Register"
          >
            立即注册
          </v-btn>

          <v-card-text class="text-center">

          </v-card-text>
        </v-col>
      </v-row>
    </v-card>
  </div>


</template>

<script lang="ts" setup>
import {ref} from "vue";
import {userStore} from "@/store/app";
import axios from "axios";

const user = userStore()
const visible = ref(false);
const name = ref('');
const email = ref(null);
const password = ref(null);
const passwordConfirm = ref(null)

const rules = {
  required: (value: string) => !!value || '此项为必填项',
  nameCounter: (value: string) => value.length >= 6 && value.length <= 12 || '用户名长度应在6到12位之间',
  pwdCounter: (value: string) => value.length >= 8 && value.length <= 12 || '密码长度应在8到12位之间',
  email: (value: string) => {
    const pattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
    return pattern.test(value) || '请输入正确邮箱格式'
  },
};

const Register = () => {
  // 检查两次输入的密码是否一致
  if (password.value !== passwordConfirm.value) {
    alert('两次输入的密码不一致，请重新输入');
    return;
  }
  // 注册逻辑
  axios.post('http://47.113.189.87:8080/users/register', {
    name: name.value,
    email: email.value,
    password: password.value
  }).then((res) => {

    if (res.data.code === 20011) {
      //注册成功逻辑
      console.log('注册成功', res.data.data.msg)
      alert('注册成功，请登录吧')
      user.setRegisterDialog(false)//这个代码是用于隐藏当前注册dialog的
      user.setLoginDialog(true)
    } else {
      //注册失败逻辑
      alert(res.data.msg)
    }
  })
};
</script>
